{extend name="mbase"}
{block name="div"}
<div class="container">
    <h5 style="text-align: center; margin-top: 25px;">录入食物</h5>
    <form action="http://jianfei.lightrain.org.cn/mobile/wnadd" method="post">

        <div class="form-group">
            <label for="name999" class="col-sm-2 col-form-label">搜索</label>
            <input type="text" name="searchname" class="form-control" id="name999">
        </div>
        <div class="form-group">
            <label for="solist" class="col-sm-2 col-form-label">选择</label>
<!--            <select style="display: none;" name="foodname" class="form-control col-sm-12 selectpicker" id="solist">-->
<!--                <?php foreach ($arr as $v){ ?>-->
<!--                <option value="<?php echo $v['name']; ?>"><?php echo $v['name']; ?>&nbsp;&nbsp;{$v.reliang} kcal/100g</option>-->
<!--                <?php } ?>-->
<!--            </select>-->
            <input type="hidden" name="foodname" value="{$arr.0.name2}" class="form-control" id="solist" onfocus="this.blur();">
            <ul class="list-group" id="solist3" style="max-height: 100px;">
                <li class="list-group-item {$arr.0.dengji}" data-reliang="{$arr.0.reliang}" data-val="{$arr.0.name2}">{$arr.0.name2}</li>
            </ul>
            <ul class="list-group hideclass" id="setfoodname">
                <?php foreach ($arr as $v){ ?>
                <li class="list-group-item setfoodname {$v.dengji}" data-reliang="{$v.reliang}" data-val="{$v.name2}">{$v.name2}</li>
                <?php } ?>
            </ul>
        </div>
        <div class="form-group">
            <label for="exampleFormControlInput1" class="col-sm-2 col-form-label">重量(g)</label>
            <input type="text" name="zhongliang" value="100" class="form-control" id="exampleFormControlInput1" placeholder="">
        </div>
        <div class="form-group">
            <label for="exampleFormControlInput2" class="col-sm-2 col-form-label">热量(kcal)</label>
            <input type="text" name="reliang" value="{$arr.0.reliang}" class="form-control" id="exampleFormControlInput2" placeholder="">
        </div>
        <div class="row">
            <div class="col-lg-12">
                <button type="submit" class="btn btn-primary btn-lg btn-block">提 交 数 据</button>
            </div>
        </div>
    </form>
    <div class="row" style="margin-top: 15px;">
        <div class="col-lg-12">
            <blockquote class="blockquote">
                <p class="mb-0">还可以吃：<?php echo -($zhongyao['daykll']-$zhongyao['sjxh']); ?>(kcal) &nbsp;&nbsp;&nbsp;完成比例：{$zhongyao.wanchengbl}%</p>
            </blockquote>

        </div>
    </div>
    <?php foreach($kll8 as $v){ ?>
    <div class="row" style="text-align: center;">
        <div class="col text-nowrap" style="overflow: hidden;">
            <blockquote class="blockquote">
                <p class="mb-0">{$v.name}</p>
            </blockquote>

        </div>
        <div class="col">
            <blockquote class="blockquote">
                <p class="mb-0">{$v.zl}(g)</p>
            </blockquote>

        </div>
        <div class="col">
            <blockquote class="blockquote">
                <p class="mb-0">{$v.kll}(kcal)</p>
            </blockquote>

        </div>
    </div>
    <?php } ?>


</div>
{/block}
{block name="js"}
<style>
    .hideclass{
        display: none;
    }
</style>

<script>
    $(document).ready(function () {
        //根据下拉列表重写setfoodname
        $(document).on('click','.setfoodname',function (){
            var val=$(this).data('val')
            var reliang=$(this).data('reliang')
            var thiss=$(this)
            $("#solist").val(val)
            $("#solist3").html(thiss)
            $("#solist3").removeClass('setfoodname')
            $("#setfoodname").hide()
            // $("#setfoodname").addClass('hideclass')
            $("#exampleFormControlInput1").val(100)
            $("#exampleFormControlInput2").val(reliang)
        })
        //单击显示setfoodname
        $(document).on('click','#solist,#solist3',function (){
            $("#setfoodname").toggle()
        })

        //根据食物重量填写卡路里
        $("#exampleFormControlInput1").keyup(function () {
            var searchkey = $("#name999").val()
            var zhongliang = $(this).val()
            var foodname = $("#solist").val()
            $.post("/mobile/srl",
                {
                    searchkey:searchkey,
                    zhongliang:zhongliang,
                    foodname:foodname
                },
                function (data) {
                    $('#exampleFormControlInput2').val(data)
                }
            );
        })
        //搜索食物名称
        $("#name999").keyup(function () {
            var name = $(this).val()
            $.post("/index/getshiwuname", {
                    name: name
                },
                function (data) {
                    html=''
                    data=JSON.parse(data)
                    if(data[0]==null){
                        $("#solist").val('')
                        $("#solist2").val('')
                        $("#solist3").html('<li class="list-group-item">&nbsp;</li>')

                        $('#setfoodname').html('')
                        $("#setfoodname").hide()
                    }else{
                        $("#setfoodname").show()
                        $("#solist").val(data[0].name2)
                        $("#solist2").val(data[0].name2)
                        for (var i=0;i<data.length;i++){
                            // html+='<option value="'+data[i].name+'">'+data[i].name+'&nbsp;&nbsp;'+data[i].reliang+' kcal/100g</option>'
                            html+='<li class="list-group-item '+data[i].dengji+'" data-reliang="'+data[i].reliang+'" data-val="'+data[i].name2+'">'+data[i].name2+'</li>\n'
                        }
                        $('#setfoodname').html(html)
                    }
                }
            );
        })
    })
</script>

{/block}